<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <!-- 一.引入资源 -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'f9658ed3f84f0763d2afd356a1ff6542',
        }
    </script>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e94552d14a617c12cf98ea07b0d7b607"></script>
    <!-- 三设置地图样式 -->
    <style type="text/css">
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <!-- 二.创建地图容器 -->
    <div id="container">显示实时路况</div>
    <!-- 四.加载地图 -->

    <script>
        var map = new AMap.Map('container', {
                center: [114.3, 30.6], //设置地图中心点的经纬度
                zoom: 12, //地图缩放的比例（3-20）
            })
            //1.创建两个点（设置可以拖动）
        var m1 = new AMap.Marker({
            map: map, //将m1这个点添加到map地图中
            draggable: true, //配置该点可以拖动
            position: new AMap.LngLat(114.225025, 30.621275),
        })
        var m2 = new AMap.Marker({
                map: map,
                draggable: true,
                position: new AMap.LngLat(114.334332, 30.569608),
            })
            //让地图根据覆盖物调整地图显示区域
        map.setFitView()
            //2.准备一条线
        var line = new AMap.Polyline({
            strokColor: '#80d8ff', //描边的颜色
            isOutline: true,
            outerlineColor: 'white',
        })
        line.setMap(map)
            //3.准备文本
        var text = new AMap.Text({
            text: '',
            style: {
                'background-color': '#29b6f6',
                'border-color': '#e1f5fe',
                'font-size': '16px',
            },
        })

        text.setMap(map)
            //4.计算
        function compute() {
            //得到m1和m2的经纬度
            var p1 = m1.getPosition()
            var p2 = m2.getPosition()
                //希望text文本显示在这个经纬度的中间
            var textPos = p1.divideBy(2).add(p2.divideBy(2)) //p1+p2
            var distance = Math.round(p1.distance(p2))
            var path = [p1, p2]
            line.setPath(path) //绘制线，根据p1,p2起始点和终点的坐标
            text.setText('距离为:' + distance + '米')
            text.setPosition(textPos)
        }
        compute()
        m1.on('dragging', compute)
        m2.on('dragging', compute)
    </script>
</body>

</html>